<template>
  <div class="Product">
    <company-home-content-layout>
      <template v-slot:menu>
        <menu-a @getSelectId="changeType" :id="id" :isDefault="isDefault" />
      </template>
      <template>
        <div class="product-content">
          <div class="before-list">
            <div class="sort">
              <p>排序方式：</p>
              <radio-group v-model="sortType">
                <m-radio-button label="default">发布时间↑</m-radio-button>
                <m-radio-button label="sales">销量↑</m-radio-button>
              </radio-group>
            </div>
            <div class="chosen">
              <p>已选择：</p>
              <div v-if="chosenIndexes.length" class="chosen-list">
                <div
                  class="item"
                  v-for="(item, index) in chosenIndexes"
                  :key="index"
                >
                  <div class="pic">
                    <img :src="list[item].image" class="objectCover" />
                  </div>
                  <div class="close" @click="remove(index)">×</div>
                </div>
              </div>
              <p v-else>无</p>
            </div>
            <div v-if="keywords" class="select-result cor666">
              搜索<span class="f16 corMain"> {{ keywords }} </span>返回的结果:
            </div>
            <div class="btns">
              <m-button
                width="124"
                size="small"
                style="margin-right: 15px"
                @click="goInquiry"
              >批量询价</m-button>
                <m-button
                  width="124"
                  size="small"
                  type="bordered"
                  @click="addSelectCart"
                  >加入购物车</m-button>
            </div>
          </div>
          <div class="list">
            <checkbox-group v-model="chosenIndexes">
              <div class="item" v-for="(item, index) in list" :key="index">
                <div
                  class="goItem cursor"
                  @click="goDetail(item.product_id, item.is_entity)"
                >
                  <div class="pic">
                    <img :src="item.image" class="objectCover" />
                  </div>
                  <p class="title textOverflow">{{ item.store_name }}</p>
                  <div class="price-and-collect">
                    <div class="price">
                      <span class="keywords">￥{{ item.ot_price }}/Pc</span>起
                    </div>
                    <img src="~/assets/images/collect-grey.png" alt="" />
                  </div>
                  <div class="storage-and-cart">
                    <div class="storage">
                      <span class="keywords">{{ item.moq }} Pcs</span>起订量
                    </div>
                    <img src="~/assets/images/cart-grey.png" alt="" />
                  </div>
                </div>
                <m-checkbox
                  class="select"
                  :label="index"
                  :disabled="chosenIndexes.length >= 10"
                  ><span/></m-checkbox>
              </div>
            </checkbox-group>
          </div>
          <nodata message="暂无产品" :status="listStatus"></nodata>
          <m-pagination
            :pagination="total"
            :page-size="limit"
            @changePage="changeThisPage"
          />
        </div>
      </template>
    </company-home-content-layout>
  </div>
</template>

<script>
import CompanyHomeContentLayout from "@/components/common/company-home-content-layout/company-home-content-layout"
import MenuA from "@/views/company-home/children/MenuA"
import MButton from "@/components/common/m-button/MButton"
import MRadioButton from "@/components/common/m-radio-button"
import MPagination from "@/components/common/m-pagination/MPagination"
import MCheckbox from "@/components/common/m-checkbox/MCheckbox"
import { Breadcrumb, BreadcrumbItem, CheckboxGroup, RadioGroup } from "element-ui"
import { getMerchantProList, addCart } from "@/request/api"

export default {
  name: "Product",
  components: {
    MCheckbox,
    MPagination,
    MRadioButton,
    MButton,
    MenuA,
    CompanyHomeContentLayout,
    RadioGroup,
    CheckboxGroup,
    Breadcrumb,
    BreadcrumbItem
  },
  data() {
    return {
      id: "",
      cate: {},
      list: [],
      page: 1,
      listStatus: 1,
      total: 0,
      limit: 10,
      mer_cate_id: "",
      sortType: "default",
      chosenIndexes: [],
      breadcrumbPaths: [],
      keywords: "",
      isDefault: true
    }
  },
  watch: {
    sortType(val) {
      this.sortType = val
      this.page = 1
      this.chosenIndexes = []
      this.getList()
    }
  },
  methods: {
    goInquiry() {
      console.log(this.chosenIndexes.length);
      if (!this.chosenIndexes.length) {
        this.$toastVant("请先选择商品！")
      } else {
        let arr = []
        for (const i in this.chosenIndexes) {
          arr.push(this.list[this.chosenIndexes[i]].product_id)
        }
        arr = this.$common.arrToString(arr)
        this.$router.push({
          name: "CateInquiry",
          query: {
            mid: this.id,
            proId: arr
          }
        })
      }
    },
    addSelectCart() {
      if (this.chosenIndexes.length == 0) {
        this.$toastVant("请先选择商品")
      } else {
        for (const i in this.chosenIndexes) {
          let id = this.list[this.chosenIndexes[i]].product_id
          that.addCarts(id)
        }
      }
    },
    addCarts(id) {
      let data = {
        cart_num: 1,
        is_new: 0,
        product_id: id,
        product_type: 0
      }
      addCart(data).then(() => {
        this.$toastVant.success("加入成功!")
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    goDetail(id, type) {
      //1材料0服务
      if (type == 1) {
        this.$router.push({
          name: "CateProduct",
          params: {id}
        })
      } else {
        this.$router.push({
          name: "ServiceProduct",
          params: {id}
        })
      }
    },
    changeThisPage(page) {
      this.page = page
      this.chosenIndexes = []
      this.getList()
    },
    getList() {
      let id = this.$route.params.id
      this.listStatus = 1
      let data = {
        order: this.sortType == "default" ? "" : this.sortType,
        mer_cate_id: this.mer_cate_id,
        keyword: this.keywords,
        page: this.page
      }
      getMerchantProList(id,{...data}).then((res) => {
          this.list = res.data.list
          this.total = res.data.count
          if (this.total == 0) {
            this.listStatus = 0
          } else {
            this.listStatus = 2
          }
          window.scrollTo({
            top: 0
          })
        }).catch((err) => {
          this.$message.error(err.message)
        })
    },
    changeType(id) {
      this.mer_cate_id = id
      this.page = 1
      this.keywords = ""
      this.chosenIndexes = []
      this.getList()
    },
    remove(index) {
      this.chosenIndexes.splice(index, 1)
    }
  },
  created() {
    this.getList()
    this.id = this.$route.params.id
    this.keywords = this.$route.query.keyword || ""
    /* if (!this.keywords) {
      this.getCate()
    } else {
      this.isDefault = false
      this.getList()
    } */
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.Product {
  .product-content {
    .before-list {
      position: relative;
      margin-bottom: 30px;

      .sort {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
      }

      .chosen {
        display: flex;
        margin-bottom: 30px;

        .chosen-list {
          width: 650px;
          //height: 200px;

          .item {
            width: 140px;
            height: 73px;
            position: relative;
            display: inline-block;
            margin: 10px;

            .pic {
              width: 100%;
              height: 100%;
              background-color: pink;
            }

            .close {
              width: 20px;
              height: 20px;
              color: #E38B2E;
              border: solid 1px #E38B2E;
              border-radius: 20px;
              text-align: center;
              line-height: 20px;
              position: absolute;
              top: -10px;
              right: -10px;
              z-index: 9;
              cursor: pointer;
            }
          }
        }
      }

      .breadcrumb {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        /deep/ .el-breadcrumb__inner {
          color: #000;
        }
      }

      .btns {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .list {
      margin: -10px;
      margin-bottom: 15px;

      .item {
        display: inline-block;
        width: calc((100% - 80px) / 4);
        margin: 10px;
        padding: 7px;
        font-size: 18px;
        color: #969696;
        background-color: #fff;
        position: relative;

        .pic {
          width: 100%;
          height: 265px;
          background-color: #ccc;
          margin-bottom: 10px;
        }

        .title {
          @include text-omitted(2);
          margin-bottom: 10px;
        }

        .price-and-collect {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          margin-bottom: 10px;
        }

        .storage-and-cart {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          margin-bottom: 10px;
        }

        .keywords {
          color: $theme-color-1;
          font-weight: bold;
          font-size: 16px;
          margin-right: 5px;
        }

        .select {
          position: absolute;
          top: 15px;
          right: 5px;
        }
      }
    }
  }
}
</style>
